<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>层次选择器</title>
    <style>
        .testColor {
            background: green;
        }

        .gray {
            background: gray;
        }
    </style>
</head>
<!--
    层次选择器
        后代选择器
            格式： 父元素 指定元素 （空格隔开）
            示例： $("父元素 指定元素")
            选择父元素的所有指定元素（包含第一代、第二代等）
        子代选择器
            格式： 父元素 > 指定元素 （大于号隔开）
            示例： $("父元素 > 指定元素")
            选择父元素的所有第一代指定元素
        相邻选择器
            格式： 元素 + 指定元素 （加号隔开）
            示例： $("元素 + 指定元素")
            选择元素的下一个指定元素（只会查找下一个元素，如果元素不存在，则获取不到）
        同辈选择器
            格式： 元素 ~ 指定元素 （波浪号隔开）
            示例： $("元素 ~ 指定元素")
            选择元素的下面的所有指定元素
 -->
<body>
<div id="parent">层次择器
    <div id="child" class="testColor">父选择器
        <div class="gray">子选择器</div>
        <img src="http://www.baidu.com/img/bd_logo1.png"
             width="270" height="129"/>
        <img src="http://www.baidu.com/img/bd_logo1.png"
             width="270" height="129"/>
    </div>
    <p>p元素</p>
    <div>
        选择器2
        <div>选择器2中的div</div>
    </div>
</div>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
    // 后代选择器
    var hd = $("#parent div");
    console.log(hd);

    // 子代选择器
    var zd = $("#parent > div");
    console.log(zd);

    // 相邻选择器
    var xl = $("#child + div");
    console.log(xl);

    // 同辈选择器
    var imgs = $(".gray ~ img");
    console.log(imgs);

</script>
</html>
